<template>
  <div>
      <div class="titles">
      <img src="../../images/main/store.png" alt>
      <span>{{title}}</span>
    </div>
    <div class="xz_continer">
      <h1 class="title">{{title}}</h1>
      <div class="xian_t"></div>
      <div class="con_t">
        <div class="line_input">
          <img class="red" src="../../images/main/red.png" alt><div class="dsc">门店名称:</div>
          <input type="text" placeholder="请输入门店名称" class="input_fi">
        </div>
        <div class="line_input">
          <img class="red" src="../../images/main/red.png" alt><div class="dsc">门店区域:</div>
          <div class="radio">
          <div v-for="(item,index) in areaList" :key="index">
            <input type="radio" :id="'area_'+item.id" v-model="userInfo.area"  name="area" />
          <label :for="'area_'+item.id">{{regionName}}</label>
          </div>
        </div>
        </div>
        <div class="line_input">
          <img class="red" src="../../images/main/red.png" alt><div class="dsc">门店地址:</div>
          <textarea type="text" placeholder="请输入门店地址" class="input_tr"></textarea>
        </div>
        <div class="line_input">
          <img class="red" src="../../images/main/red.png" alt><div class="dsc">房间设置:</div>
          <input type="button" value="去设置" class="input_fo" @click="setRoom()">
        </div>
        <div>
          <div class="tijiao">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs' // 将请求转换成form 表单提交形式
export default {
    data () {
        return {
            title:'新增门店',
            areaList: [],
            params: this.decodeJson( this.$route.query.p )
        }
    },
    methods : {
        /**
         * 设置房间
         */
        setRoom: function () {
            this.$router.push({
        path: "/main/editRoom"
      });
        },
        /**
     * 获取区域
     */
    getArea: function () {
      let that = this
      axios({
        method:'post',
        url:`/tRegion/selectAll`,
      }).then(res => {
        if (res.data.code == 0) {
        that.areaList = res.data.data
        }
      })
    },
    },mounted () {
        this.getArea()
        if (this.params.id) {
          this.title = '修改门店'
        }
    }
};
</script>
<style scoped>
.red {
    width: 10px;
    height: 10px;
    padding: 15px 5px;
    float: left;
}
.titles{
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
  margin-top: 68px;
  margin-bottom: 86px;
  padding-left: 136px;
}
.titles span {
  float: left;
}
.titles img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}

.xz_continer {
  background: #ffffff;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  width: 1071px;
  height: 889px;margin-left: 425px;
}
.title {
  font-family: PingFangSC-Medium;
  font-size: 24px;
  color: #000000;
  font-weight: bold;
  line-height: 115px;
  text-align: center;
}
.xian_t {
  background: #f5f5f5;
  width: 861px;
  height: 3px;
  margin: 0 auto;
}
.con_t {
  width: 450px;
  overflow: hidden;
  margin: 0 auto;
}
.line_input {
  overflow: hidden;
  margin-top: 64px;
}
.dsc {
  line-height: 40px;
  text-align: left;
  margin-right: 30px;
  float: left;
  display: inline-block;
  font-size:18px;
color:#000000;
font-weight: bold;
  
}
.input_fi {
  background: #ffffff;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 317px;
  height: 40px;
  display: inline-block;
  font-family:PingFangSC-Medium;
font-size:18px;
color:#888888;
padding-left: 10px;
box-sizing: border-box;
}
.two_radio {
  vertical-align: center;
  line-height: 40px;
  display: inline-block;
}
input[type="radio"] + label::before {
    content: "\a0"; /*不换行空格*/
    display: inline-block;
    vertical-align: middle;
    /* font-size: 18px; */
    width: 8px;
    height: 8px;
    margin-right: .4em;
    border-radius: 50%;
    border: 1px solid #085dab;
    line-height: 1; 
    box-shadow:0px 0px 2px 0 rgba(0,0,0,0.50);
    border: 8px solid #fff;
}
input[type="radio"]:checked + label::before {
    background-color: #fff;
    background-clip: content-box;
    border: 8px solid #085dab;
    
}
input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    margin-left: 58px;
}
.input_tr {
  background: #ffffff;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 316px;
  height: 95px;
  display: inline-block;
  font-size:18px;
color:#888888;
box-sizing: border-box;
padding: 7px 10px;
}
.input_fo {
  background: #dddddd;
  border: 1px solid #979797;
  width: 97px;
  height: 38px;
  display: inline-block;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  letter-spacing: 0.02px;
  text-align: center;
  font-size:18px;
color:#000000;
font-weight: bold;
}
.tijiao {
  background: #085dab;
  width: 255px;
  height: 55px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  display: block;
  margin-top: 64px;
  margin-left: 125px;
  text-align: center;
  line-height: 55px;
}
</style>
